﻿var React = require('react');
var ReactDOM = require('react-dom');
require('../../../css/go.css');
var StateManager = require('../../store/main/GoStateManager');
"user strick"
//当前步状态指示器，可以指标当前步数、落子方、是否处理布局状态等信息
class CurrentLabel extends React.Component{
	constructor(props){
		super(props);
		//使用全局的状态作为初始状态
		var current = StateManager.getCurrent();
		this.state={
			index:current.index,
			goBlack:current.goBlack,
			placeBlack:current.placeBlack,
			place:current.place,
		};
		//设置currentChange函数的this
		this.currentChange=this.currentChange.bind(this);
		//注册事件监听器
		StateManager.subCurrentChange(this.currentChange);
	}

	//状态改变事件监听器，调整组件的状态
	currentChange(current){
		this.setState({
			index:current.index,
			goBlack:current.goBlack,
			placeBlack:current.placeBlack,
			place:current.place,
		});
	}

	render(){
		return <span className="bg-success">
            <strong>当前步数：</strong>{this.state.index}
			<strong>　落子方：</strong>{this.state.goBlack==true?'黑方':'白方'}
			<strong>　布局子：</strong>{this.state.placeBlack==true?'黑子':'白子'}
			<strong>　状态：</strong>{this.state.place==true?'布局':'行棋'}
        </span>;
	}
}

//围棋桌面
class GoDesk extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            refresh: false
        };
    }

    render() {
        var self = this;
        this.state.refresh=false;
        var pieces = [];
		//每个交叉点上都放一个子，只是未点击时不显示，棋子黑白、编号都不重要，用户点击时会修改
        for (var i=0; i<19*19; i++){
        	pieces.push(
        		<GoPiece black={i % 2==0 ?true:false} key={'go'+(i+1)} pieceId={i}/>
        	);
        }
        return <div className="go-desk">
			<div className="go-opr">
				<GoBtns />
			</div>
        	<div className="go-board">
				{pieces}		        		
        	</div>
			<div className="text-center">
				<CurrentLabel />
			</div>
        </div>;
    }
}

//可以控制单个按钮的状态
//这个不再使用
//@delete
class GoBtn extends React.Component{
	constructor(props){
		super(props);
		this.state={
			active:false,
		}
		this.clickHandle=this.clickHandle.bind(this);
	}
	
	clickHandle(event){
		this.setState({active:!this.state.active});
		console.log(this.state);
	}
	//<img src=img/{this.state.png} />
	render(){
		var className = "btn btn-default btn-sm";
		if(this.state.active==true)className = className+" active";
		return <button className={className} onClick={this.clickHandle}>{this.props.title}</button>;
	}
}

//使用bootstap的按钮组，可以不用控制按钮的状态，较为方便，还没有完全走通
//使用radio按钮组实现几个控制行棋的按钮，因为只能处于其中一个状态
class GoBtns extends React.Component{
	constructor(props){
		super(props);
		this.state={index:1};//指标按钮的激活状态，没有完成
		this.setFirstClickHandle=this.setFirstClickHandle.bind(this);
		this.setPlaceClickHandle=this.setPlaceClickHandle.bind(this);
		this.newClickHandle=this.newClickHandle.bind(this);
		this.saveClickHandle=this.saveClickHandle.bind(this);
		this.loadClickHandle=this.loadClickHandle.bind(this);

		this.redoClickHandle=this.redoClickHandle.bind(this);
		this.undoClickHandle=this.undoClickHandle.bind(this);
	}

	//这个还没有验证
	getActiveBtnIndex(){
		if (StateManager.current.place==false) return 1;//黑先、白先差别不大，似乎没有影响
		else if (StateManager.current.placeBlack)return 2;
		else return 3;
	}
	//设置黑先
	setFirstClickHandle(bBlack){
		console.log("设置落子方颜色："+bBlack);
		StateManager.setFirst(bBlack);
	}

	setPlaceClickHandle(bBlack){
		console.log("设置布局子颜色："+bBlack);
		StateManager.setPlace(bBlack);
	}

	newClickHandle(){
		if (confirm('您确定要新建布局吗?')==true){
			StateManager.restart();
		}
	}

	saveClickHandle(){
		alert("暂示实现");
	}

	loadClickHandle(){
		alert("暂示实现");
	}
	redoClickHandle(){
		StateManager.redo();
	}

	undoClickHandle(){
		StateManager.undo();
	}
	render(){
		return <div>
					<span>
						<div className="btn-group" data-toggle="buttons">
						  <label className="btn btn-sm btn-default active" onClick={this.setFirstClickHandle.bind(this,true)}><input type="radio" autoComplete="off" defaultChecked title="黑方先走" />黑先</label>
						  <label className="btn btn-sm btn-default" onClick={this.setFirstClickHandle.bind(this,false)}><input type="radio" autoComplete="off" />白先</label>
						  <label className="btn btn-sm btn-default" onClick={this.setPlaceClickHandle.bind(this,true)}><input type="radio" autoComplete="off" />黑子</label>
						  <label className="btn btn-sm btn-default" onClick={this.setPlaceClickHandle.bind(this,false)}><input type="radio" autoComplete="off" />白子</label>
						</div>
					</span>

					<span>
						<button className="btn btn-sm btn-default" onClick={this.newClickHandle}>新建</button>
						<button className="btn btn-sm btn-default" onClick={this.saveClickHandle}>保存</button>
						<button className="btn btn-sm btn-default" onClick={this.loadClickHandle}>打开</button>
					</span>

					<span>
						<button className="btn btn-sm btn-default" onClick={this.undoClickHandle}>撤销</button>
						<button className="btn btn-sm btn-default" onClick={this.redoClickHandle}>重做</button>
					</span>
				</div>;
	}
}

//棋子
class GoPiece extends React.Component{
	constructor(props){
		super(props);
		var pieceId = props.pieceId;
		var pieceState = StateManager.getPieces()[pieceId];
		this.state={
			showNum:true,//是否显示数字，这个应该是个全局参数
			num:pieceState.num,//子上显示的数字，如果为零，表示布局时摆的子，不显示数字
			black:pieceState.black,//true表示为黑
			last:false,//是否是最后一个子
			pieceId:pieceId,//棋子的ID，左上为0，从左到右、从上到下，赋值后不发生变化
			visibility:pieceState.visibility,//不可见时，为未放子或者被吃掉，从全局变量中取，
		}
		
		//设置this，很重要
		this.handleClick=this.handleClick.bind(this);
		this.pieceChange=this.pieceChange.bind(this);
		StateManager.subPieceChange(this.pieceChange);
	}

	pieceChange(piecesArray){
		//React会判断UI要不要更新，全部更新，不要紧
		this.setState({
				visibility:piecesArray[this.state.pieceId].visibility,
				black:piecesArray[this.state.pieceId].black,
				num:piecesArray[this.state.pieceId].num,
				showNum:StateManager.current.numShow,
				last:piecesArray[this.state.pieceId].num==StateManager.current.index,//没有想好如何判断
		});
	}

	//这个函数不直接改变自己组件的状态
	handleClick(){
		//console.log("棋子点击，状态信息如下：");
		//console.log(this.state);

		//if (this.state.visibility=='visible' && StateManager.isPlace()==false){//棋子可见、布局状态，且非布局棋子
		//	console.log("棋子可见、非布局状态，退出！");
		//	return ;
		//}
		//if (this.state.visibility=='visible' && StateManager.isPlace()==true && this.state.num!=0){//棋子可见、布局状态，且非布局棋子
		//	console.log("棋子可见、布局状态，且非布局棋子，退出！");
		//	return ;
		//}
        //
		//console.log('修改棋子状态');
		//var state={};
		//if (StateManager.isPlace()==false){//行棋中
		//	state.num = StateManager.current.index;
		//	state.black = StateManager.current.goBlack;
		//	state.visibility = 'visible';
        //
		//}
		//else{//布局
		//	state.num=0;
		//	state.visibility = 'visible';
		//	state.black = StateManager.current.placeBlack;
		//	//如果原来棋子已经显示，且颜色相同，用是布局摆的棋子，设置其隐藏
		//	if(this.state.visibility=='visible' && StateManager.current.placeBlack==this.state.black && this.state.num==0){
		//		state.visibility = 'hidden';
		//	}
		//}
		//StateManager.setPieceState(this.state.pieceId,state);//这里有点儿乱
		//这个放最后，完成大大压栈工作
		StateManager.clickPiece(this.state.pieceId);
		//this.setState(state);
	}
	
	render(){
		var className="go-piece go-piece-"+(this.state.black==true?'black':'white');
		//console.log(this.state);
		if (this.state.visibility=='hidden') className = className+" go-piece-hidden";

		var pieceNum = this.state.num==0?'':this.state.num;
		return <div className={className} onClick={this.handleClick} id={'piece_'+this.state.pieceId}>
			<span style={{visibility:this.state.visibility}}>{pieceNum}</span>
		</div>;
	}
}

ReactDOM.render(
  <GoDesk />,
  document.getElementById('go-container')
);
